<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频服务系统</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>视频服务系统</h1>
        </header>

        <main>
            <!-- 视频播放和列表区域 -->
            <section class="video-content">
                <!-- 视频播放区域 -->
                <div class="video-player" id="videoPlayerSection">
                    <h2>视频播放</h2>
                    <div class="player-container">
                        <video id="videoPlayer" controls>
                            您的浏览器不支持 HTML5 视频播放。
                        </video>
                        <div class="video-info">
                            <h3 id="currentVideoTitle">
                                <span class="default-text">请从右侧列表选择要播放的视频</span>
                            </h3>
                        </div>
                    </div>
                </div>

                <!-- 视频列表区域 -->
                <div class="video-list">
                    <h2>视频列表</h2>
                    <div id="videoContainer"></div>
                    <div class="pagination">
                        <button onclick="loadPreviousPage()">上一页</button>
                        <span id="currentPage">1</span>
                        <button onclick="loadNextPage()">下一页</button>
                    </div>
                </div>
            </section>

            <!-- 上传区域 -->
            <section class="upload-section">
                <h2>上传视频</h2>
                <div class="upload-form">
                    <input type="text" id="videoTitle" placeholder="视频标题（可选，默认使用文件名）">
                    <input type="file" id="videoFile" accept="video/mp4,video/mpeg" required>
                    <div class="progress-bar" id="uploadProgress">
                        <div class="progress"></div>
                    </div>
                    <button onclick="uploadVideo()">上传</button>
                </div>
            </section>
        </main>
    </div>
    <div id="customAlert" class="custom-alert">
        <div class="alert-content">
            <div class="alert-message"></div>
            <button onclick="closeAlert()">确定</button>
        </div>
    </div>
    <div id="customConfirm" class="custom-alert">
        <div class="alert-content">
            <div class="alert-message"></div>
            <div class="alert-buttons">
                <button class="confirm-btn">确定</button>
                <button class="cancel-btn">取消</button>
            </div>
        </div>
    </div>
    <script src="/static/js/main.js"></script>
</body>
</html> 